<script lang="ts" setup>
  import { ref } from 'vue'

  defineProps<{
    data: { label: string }[]
  }>()
  const active = ref(0)
  const changeTab = (i: number) => {
    active.value = i
    emit('change', i)
  }

  const emit = defineEmits<{
    (e: 'change', active: number): void
  }>()
</script>

<template>
  <view class="custom-tabs">
    <view
      class="custom-tabs-bar"
      v-for="(item, i) in data"
      :key="i"
      :class="{ active: i == active }"
      @click="changeTab(i)"
    >
      <text class="tabbar-text">{{ item.label }}</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  // 自定义tabbar
  .custom-tabs {
    display: flex;
    position: relative;
    padding: 0 30rpx;
  }

  .custom-tabs-bar {
    height: 80rpx;
    line-height: 80rpx;
    color: #979797;
    margin-right: 30rpx;
    position: relative;

    &.active {
      color: #121826;
      font-weight: 500;
      border-bottom: 2px solid #2cb5a5;
    }
  }

  .tabbar-text {
    font-size: 30rpx;
  }

  .custom-tabs-cursor {
    position: absolute;
    bottom: 3px;
    left: 20px;

    width: 20px;
    height: 2px;
    border-radius: 2px;
    background-color: #2cb5a5;
    transition: all 0.3s ease-out;
  }
</style>
